<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
    <link rel="stylesheet" href="static/index/css/index.css">
  <link rel="shortcut icon" href="static/icon_img/tubiao.ico"/>
  <link rel="bookmark" href="static/icon_img/tubiao.png"/>
  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome -->
  <!-- static/ -->
  <link rel="stylesheet" href="static/index/css/all.min.css">
  <!-- fullCalendar -->
  <link rel="stylesheet" href="static/index/css/main.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="static/index/css/adminlte.min.css">
   <link rel="stylesheet" href="static/index/css/query01.css">
<!-- <link rel="stylesheet" href="static/public/bootstrap/css/bootstrap.css"> -->
 <script src="static/public/jquery/jquery.min.js"></script>
  <style type="text/css">
	  /* 这里需要for循环生成样式属性 */
	{% for p in pd.page.items %}
  	.page{{p.pid}}{
  			width: 600px;
  		}
  		.first{{p.pid}}{
  			
  			border-bottom: orangered 4px solid;
  			
  		}
  		.second{{p.pid}}{
  			border-bottom: none;
  			
  		}
  		.third{{p.pid}}{
  			border-bottom: none;
  		}
 {% endfor %}
  </style>
	</head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
  <!-- Navbar -->
  <nav class="main-header navbar navbar-expand navbar-white navbar-light">
    <!-- Left navbar links -->
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
      </li>
      <li class="nav-item d-none d-sm-inline-block">
       {% if request.args.get('name') == None %}
       <a href="login?page=querypagemsg" class="nav-link">登录
       </a>
       {% else %}
       <a href="#" id="userlogout">退出</a>
       <script>
       			  var userlogout = document.getElementById('userlogout');
       			  userlogout.onclick = function(){
       				 var flag=confirm('您确定退出吗?')
       				 if(flag == true){ location.href='/userlogout'}
       				 
       			  }
       </script>
       {% endif %}
        </a>
      </li>
    </ul>
	&nbsp;&nbsp;&nbsp;
{% include 'speak_template.html' %}
    <!-- Right navbar links -->
    <ul class="navbar-nav ml-auto">
      <!-- Navbar Search -->
      <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button">
          <i class="fas fa-search"></i>
        </a>
      </li>

      <!-- Messages Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-comments"></i>
          <span class="badge badge-danger navbar-badge"></span>
        </a>
      </li>
      <!-- Notifications Dropdown Menu -->
      <li class="nav-item dropdown">
        <a class="nav-link" data-toggle="dropdown" href="#">
          <i class="far fa-bell"></i>
          <span class="badge badge-warning navbar-badge"></span>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="fullscreen" href="#" role="button">
          <i class="fas fa-expand-arrows-alt"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
          <i class="fas fa-th-large"></i>
        </a>
      </li>
    </ul>
  </nav>
  <!-- /.navbar -->

  <!-- Main Sidebar Container  这里搞了颜色渐变--> 
  <aside class="main-sidebar index-gradient elevation-4">
    <!-- Brand Logo -->
    <a href="/?name={{name}}" class="brand-link">
      <img src="static/icon_img/tubiao.png" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-text font-weight-light" style="font-size:20px;">宠物智能识别系统</span>
    </a>
 
    <!-- Sidebar -->
    <div class="brand-link" >
      <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        {% if name== None %}
        <div class="image">
          <img src="static/icon_img/default-150x150.png" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="login?page=index" class="d-block">未登录</a>
        </div>
        {% endif %}
        {% if name!= None %}
        <div class="image">
          <!-- <img src="static/imgs/userpics/{{name}}.png" class="img-circle elevation-2" alt="User Image">  暂时不使用20231022-->
          <img src="http://127.0.0.1:5001/showprofileimg={{name}}" class="img-circle" alt="User Image">
        </div>
        <div class="info">
          <a href="userCenter?name={{name}}" class="d-block">{{name}}</a>
        </div>
        {% endif %}
      </div>


      <!-- Sidebar Menu -->
      <nav class="mt-2" style="" >
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
          <li class="nav-header">基础服务</li>
          <li class="nav-item">
            <a href="querypagemsg?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-search"></i>
              <p class="index-font">
                宠物信息查询
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="identify?name={{name}}" class="nav-link">
              <i class="nav-icon far fa-image"></i>
              <p class="index-font">
                宠物图片识别
              </p>
            </a>
          </li>
          <li class="nav-item">
            <a href="user_com?name={{name}}" class="nav-link">
              <i class="nav-icon fas fa-columns"></i>
              <p class="index-font">
                圈友交流
              </p>
            </a>
          </li>
        </ul>
      </nav>
      <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
  </aside>
  
  <div class="content-wrapper">
    <section class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-6">
            <h1>宠物信息查询</h1>
          </div>
          <div class="col-sm-6">
            <ol class="breadcrumb float-sm-right">
              <li class="breadcrumb-item"><a href="/?name={{name}}">主页</a></li>
              <li class="breadcrumb-item active">宠物信息查询</li>
            </ol>
          </div>
        </div>
      </div><!-- /.container-fluid -->
  </section>

 <!-- 实验部分 1027-->
 <section class="content" style="text-align: center">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <div class="card card-primary card-outline">
              <div class="card-header">
                <!-- <label for="exampleInputFile" style="margin-top: 6px">输入开始查询</label> -->
                <a class="nav-link" data-widget="navbar-search" data-target="#navbar-search1" href="#" role="button">
                 
                </a>
                <div class="navbar-search-block navbar-search-open" id="navbar-search1" style="display: flex;">
                  <form class="form-inline" method="post">
                    <Label>宠物名:<input name="pname" value="{{ request.values.get('pname','')}}"></Label>
                    <Label>来源地:<input name="address" value="{{ request.values.get('address','')}}"></Label>
                    <Label>功能:<input name="ability" value="{{ request.values.get('ability','')}}"></Label>
                
                    
                            <label>宠物类型:<select name="pclass">
                                <option value="">-请选择-</option>
                               {% for pclass in pclasslist %}
                                    <option value="{{ pclass.pclass }}" {% if request.values.get('pclass','')== pclass.pclass|string %} selected {% endif %}>{{pclass.pclass}}</option>
                               {% endfor %}
                            </select></label>
                            <input class="btn btn-primary" type="submit" value="查询" id="my_button">
						<input type="hidden" name="msg1" id="msg1" value="{{request.values.get('msg1','')}}">
					<i class="fas fa-search"></i>
			                     </div>
					        </div>
					    </div>
					</div>
				</div>
				</div>
			</section>		
					       
					      
 <!-- 实验部分-->
  
<!-- 试验部分 2023.10.26 -->
<section class="content">
   <div class="container-fluid">
        <div class="row">
		     <div class="col-md-12">
	<!-- 这里是开始for循环 -->{% for p in pd.page.items %}
	
<div class="class{{p.pid}}"></div>	

  <div class="card card-primary card-outline">
						    <div class="card-body">
   <table style="width:100%;height:300px;">
    <th><label for="">宠物图片</label></th>
	<th>
	<table style="width:90%;" >
	<tr>
		<td style="width: 42%;"><label for="">宠物名:</label><span style="font-size:20px;font-family: '楷体';">{{p.pname}}</span></td>
	<td style="width: 50%;"><label for="">别名:</label><span style="font-size:20px;font-family: '楷体';">{{p.oname}}</span></td>
	</tr>
	</table>
	</th>
	<!-- 表格分为两个部分 左边图片右边文字内容 -->
   <tr>
	   <td style="width: 40%;">  
	   <!-- 这里是图片-->
		  <img src="displayimg{{p.pid}}" alt="" style="width:95%;height: 100%;">
		 <!-- <img src="http://192.168.31.9:5001/displayimg{{p.pid}}" alt="" style="width:95%;height: 100%;"> -->
	   </td>
	   <!-- 这里宠物信息查询 这里的td要改成立体从top开始-->
	   <td style="width: 60%;vertical-align:top;">
		 <table align="left" style="width: 100%;">
			 <tr style="height: 30px;">
			 </tr>
			<tr>
				<td style="width:40%;"><label for="">类别:<span style="font-size:20px;font-family: '楷体';">{{p.pclass}}</span></label></td>
				<td style="width:60%;"><label for="">原产地:<span style="font-size:20px;font-family: '楷体';">{{p.address}}</span></label></td>
			</tr>
			<tr style="height: 30px;">
			</tr>
			 <tr>
			 	<td style="width:40%;"><label for="">功能:<span style="font-size:20px;font-family: '楷体';">{{p.ability}}</span></label></td>
			 	<td style="width:60%;"><label for="">颜值:<span style="font-size:20px;font-family: '楷体';">{{p.bueaty}}</span> 分</label></td>
			 </tr>
			 <tr style="height: 30px;">
			 </tr>
			  <tr>
			  	<td style="width:40%;"><label for="">粘人程度: <span style="font-size:20px;font-family: '楷体';">{{p.pet_clingy}}</span>分</label></td>
			  	<td style="width:60%;"><label for="">友好程度: <span style="font-size:20px;font-family: '楷体';">{{p.pet_kind}}</span>分</label></td>
			  </tr>
			  <tr style="height: 30px;">
			  </tr>
			   <tr>
			   	<td style="width:40%;"><label for="">智商: <span style="font-size:20px;font-family: '楷体';">{{p.pet_smart}}</span>分</label></td>
			   	<td style="width:60%;"><label for="">忠诚度: <span style="font-size:20px;font-family: '楷体';">{{p.pet_honest}}</span>分</label></td>
			   </tr> 
		 </table>
	   </td>
   </tr>	
   </table>
                           <div class="">
   	<span class="first{{p.pid}} queryfont1{{p.pid}}" id='ltitle1{{p.pid}}'>宠物介绍</span>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<span class="second{{p.pid}} queryfont1{{p.pid}}" id='ltitle2{{p.pid}}'>历史</span>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<span class="third{{p.pid}} queryfont1{{p.pid}}" id='ltitle3{{p.pid}}'>适合人群</span>
	<p class="ph">
		<ul style="font-size: 18px;display: block;" class="page{{p.pid}}" id="page01{{p.pid}}">
				
		<p>{{p.pmsg}}</p>
				</ul>
	<ul style="font-size: 18px;display:none" class="page{{p.pid}}" id="page02{{p.pid}}">
<p>{{p.pet_his}}</p>		
	</ul>
	<ul style="font-size: 18px;display: none;" class="page{{p.pid}}" id="page03{{p.pid}}">
<p> {{p.pet_fit}}</p>	
	</ul>      </div>
	        </div>
	     </div>
<script>
	 /* 这里的span换成 queryfont1*/
		let lis{{p.pid}}=document.querySelectorAll('.queryfont1{{p.pid}}');
				let page01{{p.pid}}=document.getElementById('page01{{p.pid}}');
				let page02{{p.pid}}=document.getElementById('page02{{p.pid}}');
				let page03{{p.pid}}=document.getElementById('page03{{p.pid}}');
				let ltitle1{{p.pid}}=document.getElementById('ltitle1{{p.pid}}');
				let ltitle2{{p.pid}}=document.getElementById('ltitle2{{p.pid}}');
				let ltitle3{{p.pid}}=document.getElementById('ltitle3{{p.pid}}');
				//console.log(lis{{p.pid}});
				for(let i=0;i<lis{{p.pid}}.length;i++){
					lis{{p.pid}}[i].onclick=function(event){
						if( event.target.classList.contains('first{{p.pid}}')){
							changePage{{p.pid}}()
							page01{{p.pid}}.style.display='block'
							ltitle1{{p.pid}}.style.borderBottom='orangered 4px solid'
							ltitle2{{p.pid}}.style.borderBottom='none'
							ltitle3{{p.pid}}.style.borderBottom='none'
						}else if( event.target.classList.contains('second{{p.pid}}')){
							changePage{{p.pid}}()
							page02{{p.pid}}.style.display='block'
							ltitle2{{p.pid}}.style.borderBottom='orangered 4px solid'
							ltitle1{{p.pid}}.style.borderBottom='none'
							ltitle3{{p.pid}}.style.borderBottom='none'
						}else{
							changePage{{p.pid}}()
							page03{{p.pid}}.style.display='block'
							ltitle3{{p.pid}}.style.borderBottom='orangered 4px solid'
							ltitle1{{p.pid}}.style.borderBottom='none'
							ltitle2{{p.pid}}.style.borderBottom='none'}}}
				function changePage{{p.pid}}(){
					document.querySelectorAll('.page{{p.pid}}').forEach(el=>{
					el.style.display='none'})}
</script>		
	
		{% endfor %}
		<!-- 这里结束for循环 -->
      </div>
    </div>
  </div>
</section>
 <div style="text-align: center;">
            总记录条数:{{pd.page.total}} 每页显示记录数:{{ pd.page.per_page }} 总页数:<span id="allPage">{{pd.page.pages}}</span>
            <input class="btn btn-default" type="button" value="首页" onclick="toPage(1)" {% if pd.page.page == 1 %}disabled{%endif%}>
            <input class="btn btn-default" type="button" value="上一页" onclick="toPage({{pd.page.prev_num}})" {% if pd.page.page == 1 %}disabled{%endif%}>
            当前页:<input value="{{pd.page.page}}" size="3" name="currpage" onchange="toPage(this.value)">
            <input class="btn btn-default" type="button" value="下一页" onclick="toPage({{pd.page.next_num}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
            <input class="btn btn-default" type="button" value="末页" onclick="toPage({{pd.page.pages}})" {% if pd.page.page == pd.page.pages %}disabled{%endif%}>
            
        </div>
   <!-- 试验部分 -->
                 </form> 
				
						 <script>
						     function toPage(val){//val表示当前页
						         //获取总页数
						         allPage = document.getElementById("allPage").innerText
						         if(val>allPage)val = allPage
						         currpageObj = document.querySelector("input[name='currpage']")
						         currpageObj.value = val
						         document.forms[0].submit() //form表单提交
								 }
	          		     /* 2023-10-28分页bug修复*/
						function onclickbtn(){   $("#my_button").click(function() {  
							   	$("#msg1").val("点击了")				
						          });  }
								  
								function clear(){
									
									document.getElementById('msg1').value = ''
								}
							onclickbtn();	  
						setInterval('clear()',1000);
					</script>
						
   <!-- 分页部分 -->
  </div>
  <!-- /.content-wrapper -->
  <!-- Control Sidebar -->
  <aside class="control-sidebar index-gradient">
    <!-- Control sidebar content goes here -->
  </aside>
  <!-- /.control-sidebar -->
</div>
<!-- ./wrapper -->

<!-- jQuery -->

<!-- Bootstrap -->
<script src="static/public/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- jQuery UI -->
<script src="static/public/jquery/jquery-ui.min.js"></script>
<!-- AdminLTE App -->
<script src="static/index/js/adminlte.min.js"></script>
<!-- fullCalendar 2.2.5 -->
<script src="static/index/js/moment.min.js"></script>
 <script src="static/index/js/main.js"></script>  
<!-- AdminLTE for demo purposes -->
<!-- Page specific script -->
<!-- <script src="static/index/js/querymsg.js"></script>  暂时注释-->
	</body>
</html>